<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>管理员界面</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<style>
    /* Adjust sidebar style */
    .sidebar {
        height: 100%;
        width: 250px;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #f8f9fa;
        padding-top: 50px; /* Padding to avoid overlapping with the fixed navbar */
    }

    /* Style links in the sidebar */
    .sidebar a {
        padding: 10px 15px;
        text-decoration: none;
        display: block;
        color: #333;
    }

    /* Change background color of active link */
    .sidebar a.active {
        background-color: #007bff;
        color: #fff;
    }

    /* Style for the content area */
    .content {
        margin-left: 250px; /* Adjust margin to avoid overlapping with the sidebar */
        padding: 20px;
    }
</style>
<!-- Sidebar -->
<div class="sidebar">
    <a href="{% url 'user_backend' %}" class="active">用户管理界面</a>
    <a href="{% url 'data_manage' %}">数据管理界面</a>
    <a href="#" data-toggle="modal" data-target="#predictModal">租聘人数预测</a>
</div>

<!-- Page content -->
<div class="content">
    <h2>用户信息</h2>
    <table class="table table-bordered">
        <thead>
        <tr>
            {% for columns_name in columns_names %}
                <th>{{ columns_name }}</th>
            {% endfor %}
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for datum in data_info %}

            <tr>
                <td>{{ datum.0 }}</td>
                <td>{{ datum.1 }}</td>
                <td>{{ datum.2 }}</td>

                <td>
                    <!-- 触发模态框的按钮 -->
                    <button type="button" class="btn btn-primary btn-sm" id="openModalBtn" data-toggle="modal"
                            data-target="#editModal" onclick="modify_user(this)">
                        修改
                    </button>
                    <button class="btn btn-warning btn-sm" onclick="del_user(this)">删除</button>
                </td>
            </tr>
        {% endfor %}

        <!-- 添加更多用户行 -->
        </tbody>
    </table>
</div>
<!-- 模态框 -->
<div class="modal" id="editModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改用户数据</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 这里放置您的表单 -->
                <form id="edit-form">
                    <!-- 表单内容 -->
                    <label for="username">username</label>
                    <input type="text" class="form-control" name="username" placeholder="username" id="username">
                    <br>
                    <label for="password">password</label>
                    <input type="text" class="form-control" name="password" placeholder="password" id="password">

                    <br>
                    <label for="status">status</label>
                    <input type="text" class="form-control" name="status" placeholder="status" id="status">

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveChangesBtn" onclick="saveChangesBtn()">保存更改
                </button>
            </div>
        </div>
    </div>
</div>

<!--租聘人数界面预测模态框-->
<!-- Modal -->
<div class="modal fade" id="predictModal" tabindex="-1" role="dialog" aria-labelledby="predictModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="predictModalLabel">租聘人数预测界面</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>请输入指标后点击提交，后台会将预测结果弹出在提示框中。:</p>
                <form id="user-form">
                    <input type="text" class="form-control" name="hour" placeholder="Hour">
                    <input type="text" class="form-control" name="temperature" placeholder="Temperature">
                    <input type="text" class="form-control" name="humidity" placeholder="Humidity">
                    <input type="text" class="form-control" name="windspeed" placeholder="WindSpeed">
                    <input type="text" class="form-control" name="visibility" placeholder="Visibility">
                    <input type="text" class="form-control" name="dewpoint" placeholder="DewPointTemperature">
                    <input type="text" class="form-control" name="solar" placeholder="SolarRadiation">
                    <input type="text" class="form-control" name="rainfall" placeholder="Rainfall">
                    <input type="text" class="form-control" name="snowfall" placeholder="Snowfall">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="submit-btn">提交</button>
            </div>
        </div>
    </div>
</div>

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
<script>
    document.getElementById("submit-btn").addEventListener("click", function () {
        // 创建 FormData 对象
        var formData = new FormData(document.getElementById("prediction-form"));
        // 发送请求到后台
        axios.post("{% url 'predict' %}", formData)
            .then(function (response) {
                // 处理后台返回的响应
                console.log(response.data);
                alert(`预测成功！基于您输出的指标，租聘人数预测为：${response.data.data}`)
            })
            .catch(function (error) {
                // 处理请求错误
                console.log(error);
            });
    });

    // 根据用户名删除用户
    function del_user(button) {
        let row = button.closest('tr')
        let username = row.cells[0].innerText

        // 发送请求到后台
        axios.post("{% url 'del_user' %}", {username: username})
            .then(function (response) {
                alert(response.data.data)
            })
            .catch(function (error) {
                // 处理请求错误
                console.log(error);
            });
    }

    // 将行里的对应数据插入到模态框
    function modify_user(button) {
        // 找到触发按钮所在的行
        let row = button.closest('tr');

        // 获取行中第二个单元格的数据-->租聘自行车数
        let username = row.cells[0].innerText;
        let password = row.cells[1].innerText;
        let status = row.cells[2].innerText;
        let modal_username = document.getElementById("username")
        modal_username.value = username

        let modal_password = document.getElementById("password")
        modal_password.value = password

    }

    // 将修改的用户信息发到后端
    function saveChangesBtn() {
        // 创建 FormData 对象
        var formData = new FormData(document.getElementById("edit-form"));
        console.log(formData)

        // 发送请求到后台
        axios.post("{% url 'modify_user' %}", formData)
            .then(function (response) {
                // 处理后台返回的响应
                console.log(response.data.data);
            })
            .catch(function (error) {
                // 处理请求错误
                console.log(error);
            });
    }

    // 对应页面显示对应activate样式
    var current_url = window.location.href;
    var sidebar_links = document.querySelectorAll(".sidebar a");
    for (var i = 0; i < sidebar_links.length; i++) {
        var link = sidebar_links[i];
        if (link.href === current_url) {
            link.style.class = "active";
        }
    }
</script>
<script src="{% static 'web/login_register_static/axios.js' %}"></script>

</html>